<template>
	<view>
		<view>
			<view class="headimg-group">
				<image v-for="(item, index) in userList" :key="index" :src="item.user_headimg ? $util.img(item.user_headimg) : $util.img('upload/uniapp/default_head.png')"></image>
				<image :src="$util.img('upload/uniapp/spelling_who.png')"></image>
			</view>
			<view class="tips">还差{{ info['poor_num'] }}人，满足拼团人数才算成功</view>
			<view class="time-wrap" v-if="timeMachine">
				<uni-count-down
					:day="timeMachine.d"
					:hour="timeMachine.h"
					:minute="timeMachine.i"
					:second="timeMachine.s"
					color="#333"
					splitorColor="#333"
					background-color="transparent"
					border-color="transparent"
					:showColon="false"
				/>
			</view>
			<button type="primary" class="share-firend">邀请好友</button>
			<button type="default" @click="$util.redirectTo('/promotionpages/pintuan/detail/detail', { goods_id: info.goods_id, group_id: info.group_id })">一键参团</button>
		</view>
		<view>
			<view class="pin-info">拼单信息</view>
			<view class="shop-info">
				<text class="shop-title">商品名称</text>
				<navigator :url="'/promotionpages/pintuan/detail/detail?goods_id=' + info.goods_id" class="shop-content">{{ info.goods_name }}</navigator>
			</view>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
import http from 'common/js/http.js';
import loadingCover from '@/components/loading/loading.vue';
import uniCountDown from '@/components/uni-count-down/uni-count-down.vue';
export default {
	components: {
		loadingCover,
		uniCountDown
	},
	data() {
		return {
			goodsId: 0,
			groupId: 0,
			userList: [],
			info: [],
			currentTime: 0,
			timeMachine: null
		};
	},
	async onLoad(e) {
		this.goodsId = e.goods_id;
		this.groupId = e.group_id;
		await this.getCurrentTime();
		this.getUserList();
	},
	mixins: [http],
	methods: {
		async getCurrentTime() {
			let res = await this.sendRequest({
				url: 'System.Goods.getCurrentTime',
				async: false
			});
			this.currentTime = res.data / 1000;
		},
		getUserList() {
			this.sendRequest({
				url: 'NsPintuan.Pintuan.sharePintuan',
				data: {
					goods_id: this.goodsId,
					group_id: this.groupId
				},
				success: res => {
					if (res.code == 0) {
						let info = res.data.tuangou_group_info;
						this.userList = info.user_list;
						this.info = info;
						this.timeMachine = this.$util.countDown(this.info.end_time - this.currentTime);
						if (this.$refs.loadingCover == undefined) return;
						this.$refs.loadingCover.hide();
					}
				}
			});
		}
	},
	/**
	 * 自定义分享内容
	 * @param {Object} res
	 */
	onShareAppMessage(res) {
		var path = '/promotionpages/pintuan/detail/detail?goods_id=' + this.goodsId + '&group_id=' + this.groupId;
		this.sendRequest({
			url: 'System.Member.getUserId',
			success: res => {
				if (res.data) path += '&source_uid=' + res.data;
			}
		});
		return {
			title: '还差' + this.info['poor_num'] + '人拼团成功，' + this.info.goods_name,
			// imageUrl: ,
			path: path,
			success: res => {
				this.sendRequest({
					url: 'NsMemberShare.MemberShare.shareReward'
				})
			},
			fail: res => {}
		};
	}
};
</script>

<style lang="scss">
page {
	background: #fff;
	overflow: hidden;
}
.headimg-group {
	padding: $ns-padding;
	text-align: center;
	margin-top: 100rpx;
	image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		padding: $ns-padding;
	}
}

.tips {
	font-size: 36rpx;
	text-align: center;
	font-weight: bold;
	margin: 50rpx 0;
}
.time-wrap {
	margin-bottom: 40rpx;
	text-align: center;
}

.pin-info {
	font-size: 34rpx;
	line-height: 92rpx;
	padding: 0 $ns-padding;
	font-weight: bold;
	margin-top: 52rpx;
}

.shop-info {
	display: flex;
	justify-content: space-between;
	padding: $ns-padding;

	.shop-title {
		width: 120rpx;
	}

	.shop-content {
		width: 580rpx;
		color: $base-color;
	}
}
.share-firend {
	margin-bottom: 40rpx;
}
</style>
